<template>
    <div class="module-card">
        <div class="module-header">
            <h2 class="module-title">客户满意度</h2>
            <button class="text-primary text-sm hover:underline" @click="viewFeedback">查看反馈</button>
        </div>
        <div class="p-4">
            <div class="flex flex-col items-center">
                <div class="text-4xl font-bold text-primary mb-2">{{ satisfactionScore }}</div>
                <div class="flex text-warning mb-4">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star-half-o"></i>
                </div>
                <div class="w-full max-w-xs">
                    <div class="space-y-2">
                        <div class="flex justify-between items-center">
                            <span class="text-sm">非常满意</span>
                            <span class="text-sm">{{ satisfactionRates.excellent }}%</span>
                        </div>
                        <div class="w-full bg-gray-100 rounded-full h-2">
                            <div class="h-2 rounded-full bg-primary"
                                :style="{ width: satisfactionRates.excellent + '%' }"></div>
                        </div>
                        
                        <div class="flex justify-between items-center">
                            <span class="text-sm">满意</span>
                            <span class="text-sm">{{ satisfactionRates.good }}%</span>
                        </div>
                        <div class="w-full bg-gray-100 rounded-full h-2">
                            <div class="h-2 rounded-full bg-success"
                                :style="{ width: satisfactionRates.good + '%' }"></div>
                        </div>
                        
                        <div class="flex justify-between items-center">
                            <span class="text-sm">一般</span>
                            <span class="text-sm">{{ satisfactionRates.average }}%</span>
                        </div>
                        <div class="w-full bg-gray-100 rounded-full h-2">
                            <div class="h-2 rounded-full bg-warning"
                                :style="{ width: satisfactionRates.average + '%' }"></div>
                        </div>
                        
                        <div class="flex justify-between items-center">
                            <span class="text-sm">不满意</span>
                            <span class="text-sm">{{ satisfactionRates.poor }}%</span>
                        </div>
                        <div class="w-full bg-gray-100 rounded-full h-2">
                            <div class="h-2 rounded-full bg-danger"
                                :style="{ width: satisfactionRates.poor + '%' }"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CustomerSatisfaction',
    data() {
        return {
            satisfactionScore: 4.5,
            satisfactionRates: {
                excellent: 58,
                good: 27,
                average: 10,
                poor: 5
            }
        };
    },
    methods: {
        viewFeedback() {
            // 查看反馈逻辑
            this.$emit('view-feedback');
        }
    }
}
</script>